<template>
  <div class="box">

    <a-button type="primary" @click="clickBtn">提交按钮</a-button>
    <!--  v-model 在没有校验的表单中使用   -->
    <a-form :form="editForm">

<!--      <a-form-item label="多列下拉框">-->
<!--        <mul-select-search-->
<!--          v-model="editForm.selectValue1"-->
<!--          :option="option"-->
<!--          :trigger-change="false"-->
<!--        ></mul-select-search>-->
<!--      </a-form-item>-->

      <a-form-item label="多列下拉框">
        <mul-select-search
          v-decorator="['selectValue2',{initialValue:''}]"
          :option="option"
          :trigger-change="true"
        ></mul-select-search>
      </a-form-item>
    </a-form>

    <!--  v-decorator 在有校验的表单中使用  -->
    <!--    <mul-select-search-->
    <!--      v-decorator="['student']"-->
    <!--      :option="option"-->
    <!--    ></mul-select-search>-->
  </div>
</template>

<script>
import mulSelectSearch from '@/component/mulSelectSearch'

export default {
  name: 'demoMulselect',
  components: {
    mulSelectSearch
  },
  data () {
    return {
      editForm: this.$form.createForm(this),
      // editForm: {
      //   selectValue1: ''
      // },

      option: {
        // key 指定的是显示在输入框中的字段
        key: 'name',
        columns: [
          {
            title: 'name',
            key: 'name',
            dataIndex: 'name',
            width: 150,
            scopedSlots: { customRender: 'name' }
          },
          {
            title: 'money',
            key: 'money',
            dataIndex: 'money',
            width: 200,
            scopedSlots: { customRender: 'money' }
          },
          {
            title: '日期',
            key: 'birthday',
            dataIndex: 'birthday',
            width: 150,
            scopedSlots: { customRender: 'birthday' }
          }
        ]
      }
    }
  },
  methods: {
    clickBtn () {
      // console.log(this.editForm)
      const formData = this.editForm.getFieldsValue()
      console.log(formData)
    }
  }
}
</script>

<style scoped>
.box {
  width: 400px;
  margin: 30px 30px;
}
</style>
